<template>
  <a-modal v-bind="$attrs" :footer="null" centered :width="'80%'" :mask="true" :maskClosable="false" :destroyOnClose="true" @cancel="cancelHandler">
    <a-config-provider :locale="locale">
      <a-table class="more-table" :columns="columns" :data-source="tableData" :rowKey="record=>record.link" :pagination="pagination" :scroll="{y:460}">
        <a slot="ext1" slot-scope="text, record" @click="goto(record, 'link')">
          <span>{{text}}</span>
        </a>
        <a slot="ptitle" slot-scope="text, record" @click="goto(record, 'titleLink')">
          <a-tooltip>
            <template slot="title">
              <div>
                {{text}}
              </div>
            </template>
            <span class="process-title">{{text}}</span>
          </a-tooltip>
        </a>
        <a slot="context" slot-scope="text, record" @click="goto(record, 'contextOid')">
          <span>{{text}}</span>
        </a>
        <!-- {setSelectedKeys, selectedKeys, confirm, clearFilters, column} -->
        <template slot="filterDropdown" slot-scope="{setSelectedKeys, selectedKeys, confirm, clearFilters, column}">
          <div class="filterItem">
            <div class="topItem">
              <div class="itemTitle">快捷操作</div>
              <ul>
                <li @click="sortData(column, 'upchange')">
                  <a-icon type="bars"/>
                  升序排列
                </li>
                <li @click="sortData(column, 'downchange')">
                  <a-icon type="bars"/>
                  降序排列
                </li>
              </ul>
            </div>
            <div class="botItem">
              <div class="itemTitle">
                <span class="right">筛选条件</span>
                <span class="left" @click="clearSelect(clearFilters)">清空</span>
              </div>
              <!-- input搜索框 -->
              <div class="selectItem" v-if="column.fieldType === 'Input'">
                <div class="title">{{ column.title }}查询</div>
                <div class="inputContent">
                  <a-input-search
                    v-ant-ref="c => (searchInput = c)"
                    placeholder="请输入"
                    :value="selectedKeys[0]"
                    @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                    @search="() => inputSearch(selectedKeys, confirm, column, setSelectedKeys)"
                    @pressEnter="() => inputSearch(selectedKeys, confirm, column, setSelectedKeys)"
                  />
                </div>
              </div>
              <div class="selectItem" v-if="column.fieldType === 'Date' || column.fieldType === 'Date_Time'">
                <div class="title">{{ column.title }}查询</div>
                <div class="inputContent">
                  <a-range-picker :value="selectedKeys" @change="(e) => timeChange(e, selectedKeys, confirm, column, setSelectedKeys)"/>
                </div>
              </div>
            </div>
          </div>
        </template>
      </a-table>
    </a-config-provider>
    
  </a-modal>
</template>
<script>
import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
import clonedeep from 'lodash.clonedeep'
import moment from 'moment'
export default {
  name: 'MoreModal',
  props: {
    dataList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      locale: zhCN,
      tableData: [],
      columns: [
        {
          title: '操作',
          dataIndex: 'ext1',
          key: 'ext1',
          ellipsis: true,
          fieldType: 'Input',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'ext1'
          },
          onFilter: (value, record) => {
            return record.ext1.toString().toLowerCase().includes(value.toLowerCase())
          },
          onFilterDropdownVisibleChange: (visible) => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus()
              })
            }
          }
        },
        {
          title: '流程名称',
          dataIndex: 'title',
          key: 'title',
          ellipsis: true,
          width: '30%',
          fieldType: 'Input',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'ptitle'
          },
          onFilter: (value, record) => {
            return record.title.toString().toLowerCase().includes(value.toLowerCase())
          },
          onFilterDropdownVisibleChange: (visible) => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus()
              })
            }
          }
        },
        {
          title: '流程状态',
          dataIndex: 'status',
          key: 'status',
          ellipsis: true,
          fieldType: 'Input',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon'
          },
          onFilter: (value, record) => {
            return record.status.toString().toLowerCase().includes(value.toLowerCase())
          },
          onFilterDropdownVisibleChange: (visible) => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus()
              })
            }
          }
        },
        {
          title: '所属项目',
          key: 'context',
          dataIndex: 'context',
          ellipsis: true,
          fieldType: 'Input',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'context'
          },
          onFilter: (value, record) => {
            return (record.context?record.context:'').toString().toLowerCase().includes(value.toLowerCase())
          },
          onFilterDropdownVisibleChange: (visible) => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus()
              })
            }
          }
        },
        {
          title: '流程发起人',
          dataIndex: 'creator',
          key: 'creator',
          ellipsis: true,
          fieldType: 'Input',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon'
          },
          onFilter: (value, record) => {
            return record.creator.toString().toLowerCase().includes(value.toLowerCase())
          },
          onFilterDropdownVisibleChange: (visible) => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus()
              })
            }
          }
        },
        {
          title: '当前审批人',
          dataIndex: 'processor',
          key: 'processor',
          ellipsis: true,
          fieldType: 'Input',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon'
          },
          onFilter: (value, record) => {
            return record.processor.toString().toLowerCase().includes(value.toLowerCase())
          },
          onFilterDropdownVisibleChange: (visible) => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus()
              })
            }
          }
        },
        {
          title: '角色',
          dataIndex: 'ext5',
          key: 'ext5',
          ellipsis: true,
          fieldType: 'Input',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon'
          },
          onFilter: (value, record) => {
            return record.ext5.toString().toLowerCase().includes(value.toLowerCase())
          },
          onFilterDropdownVisibleChange: (visible) => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus()
              })
            }
          }
        },
        {
          title: '到达时间',
          dataIndex: 'receivingTime',
          key: 'receivingTime',
          ellipsis: true,
          fieldType: 'Date_Time',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon'
          },
          onFilter: (value, record) => {
            return moment(record.receivingTime).isBetween(value[0], value[1])
          },
          onFilterDropdownVisibleChange: (visible) => {
            if (visible) {
              setTimeout(() => {
                // this.searchInput.focus()
              })
            }
          }
        },
      ],
      pagination: {
        page: 1, // 页码
        // current: 1, // 当前页数
        total: 0, // 总数
        pageSize: 10, //每页中显示几条数据
        pageSizeOptions: ["10", "20", "30"],
        showSizeChanger: true,
        showQuickJumper: true,
        showLessItems: true,
        showTotal: (total) => `共${total}条`, //分页中显示总的数据
      },
    }
  },
  watch: {
    dataList: function (newArr) {
      this.tableData = clonedeep(newArr)
    }
  },
  methods: {
    // 升序&降序
    sortData(col, sortType) {
      if (col.fieldType === 'Input') {
        this.textSort(this.tableData, col.dataIndex, sortType)
      } else if (col.fieldType === 'Date_Time') {
        this.timeSort(this.tableData, col.dataIndex, sortType)
      }
    },
    // 中文排序
    textSort(arr, property, sortType) {
      arr.sort(function (a, b) {
        if (a[property] && b[property]) {
          if (sortType === 'upchange') {
            return a[property].localeCompare(b[property], 'zh')
          } else {
            return b[property].localeCompare(a[property], 'zh')
          }
        }
      })
    },
    // 时间排序
    timeSort(arr, property, sortType) {
      arr.sort(function (a, b) {
        if (sortType === 'upchange') {
          return a[property] > b[property] ? 1 : -1
        } else {
          return a[property] < b[property] ? 1 : -1
        }
      })
    },
    // 数值排序
    numSort(arr, property, sortType) {
      arr.sort(function (a, b) {
        if (sortType === 'upchange') {
          return a[property] - b[property]
        } else {
          return b[property] - a[property]
        }
      })
    },
    timeChange(e, selectedKeys, confirm, column, setSelectedKeys) {
      setSelectedKeys(e ? [e[0].format('YYYY-MM-DD HH:mm:ss'), e[1].format('YYYY-MM-DD HH:mm:ss')] : [null, null])
      confirm()
    },
    // 搜索框查询
    inputSearch(selectedKeys, confirm, column, setSelectedKeys) {
      confirm()
      // this.tableData = this.tableData.filter(item => {
      //   return item[column.dataIndex].includes(selectedKeys[0])
      // })
    },
    clearSelect (clearFilters) {
      clearFilters()
    },
    goto (item, field) {
      if (!item[field]) {
        return this.$message.warning('目标地址不存在')
      }
      if (field === 'link' || field === 'titleLink') {
        window.open(item[field])
      }
      if (field === 'contextOid') {
        let oid = item[field].split(':')[2]
        this.$router.push({
          path: '/single/projectMain',
          query: {
            oid
          }
        })
      }
    },
    cancelHandler () {
      this.$emit('cancel')
    },
    okHandler () {
      this.$emit('ok')
    }
  }
}
</script>
<style lang="less" scoped>
.filterItem {
  width: 260px;
  padding: 12px 0px;
  text-align: left;
  .topItem {
    border-bottom: 1px solid #eee;
    padding: 0px 12px;
    .itemTitle {
      color: #999999;
      font-size: 14px;
      margin: 6px 0px;
    }
    ul {
      li {
        color: #333333;
        font-size: 14px;
        margin: 6px 0px;
        cursor: pointer;
      }
    }
    ul li:hover {
      color: #386bd7;
    }
  }
  .botItem {
    padding: 0px 12px;
    .itemTitle {
      margin: 6px 0px;
      display: flex;
      justify-content: space-between;
      .right {
        font-size: 14px;
        color: #999999;
      }
      .left {
        font-size: 12px;
        color: #386bd7;
        cursor: pointer;
      }
    }
    .selectItem {
      .title {
        color: #333333;
        font-size: 14px;
        margin: 4px 0px;
      }
    }
  }
}
</style>